<script setup>
  const dayjs = useDayjs();
  // pdf下载
  // word下载
  // 2017-06开始工作的时间;
  const work_years = dayjs('2017-06').fromNow(true);

  const companys = [{
    company_name: "四川艾迪克斯医疗科技有限公司", // 公司名称
    company_href: "https://www.adksyl.com/", // 公司网站
    company_tags: ['医疗', '绩效'], // 公司标签
    start_time: '2023-06', // 入职时间
    end_time: '至今', // 离职时间
    company_projects: [{ // 经历的公司项目
      project_name: '医院绩效薪酬管理系统BI模块', // 项目名称
      project_info: '后台管理系统', // 项目描述/介绍
      my_job: '负责BI模块的开发', // 我的职责
    },{
      project_name: '艾迪克斯医院薪酬绩效管理微信小程序', // 项目名称
      project_info: '微信小程序，将PC上人事管理模块，部分数据统计和其他审核操作迁移到微信小程序端', // 项目描述/介绍
      my_job: '负责小程序的需求整理，原型设计，前端开发，测试'
    },{
      project_name: '主诊医师管理系统', // 项目名称
      project_info: '后台管理系统', // 项目描述/介绍
      my_job: '负责界面设计，接口调试和界面实现。'
    }],
  },{
    company_name: "成都万物理想科技有限公司",
    company_href: "",
    company_tags: [],
    company_projects: [{
      project_name: '',
      project_info: '',
    }],
  },]
</script>
<template>
  <div>
    <p class="text-2xl font-bold mb-4">我的简历<span class="text-xs text-orange-400 ml-4">注意敏感信息</span></p>
    <div class="grid grid-cols-12 grid-rows-3 gap-y-4">
      <div class="col-span-full row-span-1 border-solid rounded-s border p-2">
        <p class="text-xl font-bold mb-4">个人信息</p>
        <div class="flex justify-start align-top">
          <img class="block w-[250px] h-[350px] mr-4">
          <div class="flex-1 flex justify-start flex-wrap">
            <div class="w-1/2">姓名：张*</div>
            <div class="w-1/2">出生年月：1995-**</div>
            <div class="w-full">联系方式：183****8427，107981****@qq.com</div>
            <div class="w-full">毕业院校：成都**学院，****专业</div>
            <div class="w-full">地址信息：成都市双流区华阳</div>
          </div>
        </div>
      </div>
      <div class="col-span-full row-span-1 border-solid rounded-s border p-2">
        <p class="text-xl font-bold mb-4">技能介绍</p>
        <div class="leading-loose">
          <div>毕业于2017年6月，至今工作已有{{ work_years }}有余。</div>
          <div>精通VUE全家桶，常用vue2，正逐步使用vue3。</div>
          <div>精通微信小程序原生开发&发布流程，熟练使用uniapp等跨平台框架。</div>
          <div>熟练使用Echart等图表相关插件进行数据可视化开发。</div>
          <div>熟悉高德/百度地图API，能进行webgis开发。</div>
          <div>熟悉React相关知识。</div>
          <div>熟悉了解各种UI框架，如：element-ui, ant-desgin系列等。</div>
        </div>
      </div>
      <div class="col-span-full row-span-1 border-solid rounded-s border p-2">
        <p class="text-xl font-bold mb-4">公司经历</p>
        <div class="border border-solid p-2 rounded-s hover:border-red-400" v-for="item in companys" :key="item.company_name">
          <div class="font-bold text-xl"><a :href="item.company_href">{{item.company_name}}</a><span class="text-sm ml-4">({{item.start_time}}-{{item.end_time}})</span></div>
          <!-- 公司的标签 -->
          <div class="my-2" v-if="item.company_tags.length">
            <span class="border border-solid rounded-s py-0.5 px-1.5 text-xs mx-1" v-for="tag in item.company_tags" :key="tag">{{tag}}</span>
          </div>
          <div class="my-4" v-for="project in item.company_projects" :key="project.project_name">
            <p>{{project.project_name}}</p>
            <div class="">{{project.project_info}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>